<template>
    <div>
        <el-tabs v-model="testTabsValue" type="card" editable @tab-remove="removeTab"
                 @tab-add="addTab(testTabsValue)">
            <el-tab-pane
                    v-for="(testTab) in testTabs"
                    :key="testTab.name"
                    :label="testTab.title"
                    :name="testTab.name">
                <el-row>
                    <el-col :span="24">
                        <div>
                            <div class="tcp_conn">
                                <el-tree
                                        :props="props"
                                        :data="data"
                                        show-checkbox
                                        :default-expand-all="true"
                                        @check-change="handleCheckChange">
                                </el-tree>
                            </div>
                            <div class="tcp_bar">
                                <el-button type="info" plain class="" @click="saveTcp(testTab)">
                                    <i class="el-icon-document-add"></i>保存
                                </el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-form ref="form_mqtt" :model="form_mqtt" label-width="80px">
                        <el-col :span="24">
                            <el-form-item label="名称">
                                <el-input v-model="form_mqtt.name"> <el-button slot="append" icon="el-icon-s-promotion">send</el-button></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="qosLevel">
                                <el-input v-model="form_mqtt.qosLevel"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="Topic">
                                <el-input v-model="form_mqtt.topic"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-form>
                </el-row>
                <el-row>
                    <div style="margin-bottom: 5px;height: 40px"><span class="tcp_conn">Request body</span>
                        <div class="tcp_bar">

                        </div>
                    </div>
                    <el-input
                            type="textarea"
                            :rows="6"
                            v-model="testTab.api_data.requestBody">
                    </el-input>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form_mqtt: {
                    name: '',
                    qosLevel: '',
                    topic: '',
                    requestBody: '',
                },
                props: {
                    children: 'children',
                    label: 'label'
                },
                data: [{
                    label: '可用mqtt连接',
                    children: [
                        {
                            label: 'mqtt连接1'
                        },
                        {
                            label: 'mqtt连接2'
                        }
                    ]
                }],
                testTabsValue: '1',
                testTabs: [{
                    title: 'GET',
                    name: '1',
                    tcp_conn: '',
                    api_data: {
                        requestBody: '',
                        responseBody: ''
                    }
                }],
                tabIndex: 1,
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log("当前点击的tab信息", tab, event);
            },
            addTab() {
                let newTabName = ++this.tabIndex + '';
                this.testTabs.push({
                    title: 'get',
                    name: newTabName,
                    tcp_conn: '',
                    requestTabs: 'first',
                    responseTabs: 'first',
                    api_data: {
                        requestBody: '',
                        responseBody: ''
                    }
                });
                this.testTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.testTabs;
                let activeName = this.testTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.testTabsValue = activeName;
                this.testTabs = tabs.filter(tab => tab.name !== targetName);
            },
            del_head(items, testTab) {
                let index = items.indexOf(testTab);
                if (index !== -1) {
                    items.splice(index, 1)
                }
            },
            add_head(testTab) {
                testTab.push({keys: "", val: ""});
            },
            handleCheckChange(data, checked, indeterminate) {
                console.log(data, checked, indeterminate);
            },
        }
    }
</script>

<style scoped>
    .tcp_bar {
        margin-right: 10px;
        float: right;
    }

    .tcp_conn {
        float: left;
        line-height: 40px;
    }

    .el-select .el-input {
        width: 130px;
    }

    .input-with-select {
        background-color: #fff;
    }

    .request_data {
        width: 45% !important;
        margin: 2px !important;
    }
</style>
